@import (reference) './mixins/index.less';

#header {
  position: fixed;
  width: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: #fff;
  .header-search {
    display: flex;
    align-items: center;
    height: 1.25rem;
    padding: 0 0.2778rem;
    background-color: #2ca2f9;
    .logo {
      width: 2.8333rem;
      height: 0.6528rem;
      .bgImg('logo');
      .bgImgContain;
    }
    .search-form {
      flex: 1;
      height: 0.7778rem;
      margin: 0.2361rem 0.2778rem;
      border: 1px solid #fff;
      border-radius: 4px;
      position: relative;
      input {
        vertical-align: top;
        height: 100%;
        color: #fff;
        &::-webkit-input-placeholder {
          color: #fff;
        }
      }
      .search-list {
        position: absolute;
        left: 0;
        top: 0.75rem;
        width: 100%;
        border: 1px solid #2ca2f9;
        border-radius: 4px;
        background-color: #fff;
        z-index: 10;
        li,
        p {
          padding: 0.2778rem;
          .fontSize(28);
        }
      }
    }
    .search {
      width: 0.4722rem;
      height: 0.4722rem;
      .bgImgContain;
      .bgImg('search');
    }
  }
  .header-tab {
    ul {
      display: flex;
      padding: 0 0.2778rem;
      li {
        flex: 1;
        line-height: 1.3889rem;
        text-align: center;
        .fontSize(32);
        a {
          display: block;
          &.active {
            border-bottom: 2px solid #33a3f5;
            color: #33a3f5;
          }
        }
      }
    }
  }
  .header-search-result {
    position: relative;
    background-color: #dedede;
    .goback {
      top: 50%;
      left: 0.1389rem;
      width: 0.5556rem;
      height: 0.5556rem;
      position: absolute;
      transform: translate3d(0, -50%, 0);
      .bgImgContain;
      .bgImg('icon-goback');
    }
    .searchCount {
      color: #5d5d5d;
      line-height: 1.3889rem;
      padding-left: 0.8333rem;
      .fontSize(28);
      em {
        color: #2ca2f9;
        margin: 0 0.1389rem;
      }
    }
  }
}
